import React, { memo, useRef, useState,useEffect } from 'react'
import Editor from 'for-editor';
import './markown.css';
import { message, Input, Radio, Button, Upload, } from 'antd';
import { addblog,editblog } from '../../api/markdown';
import { useLocation } from "react-router-dom";
import {queryblog} from '../../api/markdown'

export default memo(() => {
  const [contentvalue, setcontentvalue] = useState('');
  const [titlevalue, settitlevalue] = useState('');
  const [inputvalue, setInputvalue] = useState(1);
  const [MainImage, setmainImage] = useState('');
  const location = useLocation();

  useEffect(()=>{
    queryblog_();
  },[])
  // console.log(location);
  // 查询博客内容
  const queryblog_ = ()=>{
    let parmas = {
      id:location.state.info.id
    }
    queryblog(location.state.info.id).then(res =>{
      console.log(res);
      let content = res.data.result.content;
      let title = res.data.result.title;
      let mainImage = res.data.result.mainImage
      setcontentvalue(content);
      settitlevalue(title);
      setmainImage(mainImage)
    })
  }

  // 添加博客内容
  const handleChange = (value) => {
    console.log(value)
    setcontentvalue(value)
  }

  // 点击单选框按钮
  const mutilonChange = (e) => {
    console.log('radio checked', e.target.value);
    setInputvalue(e.target.value);
  };

  // 修改标题
  const changetitlevalue = (value) => {
    console.log(value.target.value);
    settitlevalue(value.target.value)
  }

  // 图片上传
  const props = {
    name: 'file',
    action: 'https://api.codler.cn/api/dfs/upload',
    onChange(info) {
      // console.log(info);
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
        let index = info.fileList.length - 1;
        console.log(index);
        setmainImage(info.fileList[index].response.result)
      }
    },
  };

  // 发布
  const clickpublish = (value) => {
    let params = {
      Title: titlevalue,
      Content: contentvalue,
      MainImage: MainImage,
      Category: parseInt(inputvalue),
      State: parseInt(value)
    }
    console.log(params);
    console.log(location)
    let isedit=location.state.isedit
    if(isedit==1){
      editblog(params).then(res=>{
        value == 1?  messageApi.info('发布成功'):messageApi.info('保存成功')
        console.log(res);
      })
    }else{
      addblog(params).then(res => {
        value == 1?  messageApi.info('发布成功'):messageApi.info('保存成功')
        console.log(res);
      })
    }
  }

  const editorRef = useRef();



  const handleSave = () => {
    success()
  }

  const addImg = ($file) => {
    console.log(editorRef.current)
    editorRef.current.$img2Url($file.name, 'file_url')
  }
  const [messageApi, contextHolder] = message.useMessage();

  const success = () => {
    messageApi.open({
      type: 'success',
      content: '保存成功',
    });
  };
  return (
    <>
      <div className="bigbox">
        <div className="leftbox" style={{ width: '50%' }}>
          <div className='input' style={{ width: '100%' }}>
            <div>标题</div>
            <Input placeholder="请输入标题" value={titlevalue} onChange={(value) => changetitlevalue(value)} style={{ width: '30%', margin: '10px' }} />
          </div>
          <Radio.Group onChange={(value) => mutilonChange(value)} value={inputvalue}>
            <Radio value={1}>生活</Radio>
            <Radio value={2}>个人</Radio>
            <Radio value={3}>系统</Radio>
          </Radio.Group>
        </div>
        <div className="rightbox" style={{ display: 'flex', marginRight: '50px' }}>
          <Upload {...props}>
            <img style={{width:'50px',height:'50px'}}  src={MainImage}/>
          </Upload>
        </div>
      </div>
      <div style={{ margin: '20px 0' }}>
        {contextHolder}
        <Editor
          ref={editorRef}
          subfield={true}
          preview={true}
          addImg={($file) => addImg($file)}
          value={contentvalue}
          onSave={() => handleSave()}
          onChange={(value) => handleChange(value)}
        />
      </div>
      <div style={{ display: 'flex', justifyContent: 'end', marginRight: '30px' }}>
        <Button onClick={() => clickpublish(1)} type="primary" size='default'>
          发布
        </Button>
        <Button onClick={() => clickpublish(2)} style={{ marginLeft: '20px' }} type="primary" size='default'>
          草稿
        </Button>
      </div>
    </>
  )
})
